<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>餐位预定</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.0/weui.min.css">
</head>
<body>
   <!-- <div class="weui-cells__title">性别</div>
                <div class="weui-cells weui-cells_radio">
                    <label class="weui-cell weui-check__label" for="r1">
                        <div class="weui-cell__bd">男</div>
                        <div class="weui-cell__ft">
                            <input required type="radio" class="weui-check" name="sex" value="male" id="r1" tips="请选择性别">
                            <span class="weui-icon-checked"></span>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="r2">
                        <div class="weui-cell__bd">女</div>
                        <div class="weui-cell__ft">
                            <input type="radio" name="sex" class="weui-check" value="female" id="r2">
                            <span class="weui-icon-checked"></span>
                        </div>
                    </label>
                </div>
 -->                
                <form action="${ctx}/wxReserve/pay" method="post" role="form" id="form1">
                <div class="weui-cells weui-cells_form">
                	<div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" id="name" name="name" type="text" value="${model.name!}" placeholder="请输入名字"/>
                        </div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                        </div>
                    </div>
                
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="tel" id="mobile" name="mobile" value="${model.mobile!}" required pattern="^\d{11}$" maxlength="11" placeholder="请输入手机号"/>
                        </div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                        </div>
                    </div>
                    
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">就餐人数</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="number" id="people_num" name="people_num" value="${model.peoper_num!}" min="1" placeholder="请输入就餐人数"/>
                        </div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                        </div>
                    </div>                   
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">就餐日期</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" id="reserve_date" name="reserve_date" type="date" value="${reserve_date!}" placeholder="请输入就餐日期"/>
                        </div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                        </div>
                    </div>
                    
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">就餐时间</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" id="reserve_time" name="reserve_time" type="time" value="${reserve_time!}" placeholder="请输入就餐时间"/>
                        </div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                        </div>
                    </div>
                    
                    <!-- <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">需要包间</label></div>
                        <div class="weui-cell__bd">
                            <input id="needroom" name="needroom" type="radio" value="1"/>是
                            <input id="needroom" name="needroom" type="radio" checked="checked" value="0"/>否
						</div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                        </div>
                    </div>
 -->                    
                    <!-- <div class="weui-cell weui-cell_switch">
               		 	<div class="weui-cell__bd">需要包间</div>
                		<div class="weui-cell__ft">
                    		<input class="weui-switch" type="checkbox" id="needroom" name="needroom" <#if model.needroom??&&model.needroom==1>checked="checked"</#if>>
                		</div>
            		</div>
                                        
                    <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
		                <div class="weui-cell__bd">
		                    <textarea class="weui-textarea" rows="3" maxlength="50" id="remark" name="remark">${model.remerk!}</textarea>
		                </div>
		            </div> -->
                    
                    <!-- <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" required pattern="REG_IDNUM" maxlength="18" placeholder="输入你的身份证号码" emptyTips="请输入身份证号码" notMatchTips="请输入正确的身份证号码">
                        </div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell weui-cell_vcode">
                        <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" maxlength="4" type="text" required pattern="REG_VCODE" placeholder="点击验证码更换" tips="请输入验证码">
                        </div>
                        <div class="weui-cell__ft">
                            <i class="weui-icon-warn"></i>
                            <img class="weui-vcode-img" src="http://weui.github.io/weui/images/vcode.jpg">
                        </div>
                    </div>
 -->                </div>
                <div class="weui-btn-area">
                    <a id="formSubmitBtn" href="javascript:submit()" class="weui-btn weui-btn_primary">提交</a>
                    <input type="hidden" name="payflag" id="payflag" value="${payflag!}"/>
                    <input type="hidden" name="id" id="id" value="${model.id!}"/>
                    <input type="hidden" name="reserve_id" id="reserve_id" value="${model.reserve_id!}"/>
                </div>
                </form>
      <script src="https://res.wx.qq.com/open/libs/weuijs/1.1.0/weui.min.js"></script>
      <script src="${ctx}/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>     

</body>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
function submit(){
	var flag = 1;//提交标志
	var name = document.getElementById("name").value;
	var mobile = document.getElementById("mobile").value;
	var people_num = document.getElementById("people_num").value;
	var reserve_date = document.getElementById("reserve_date").value;
	var reserve_time = document.getElementById("reserve_time").value;
	if(name==null || name==""){
		document.getElementById("name").value = "";
		document.getElementById("name").setAttribute("placeholder","请输入正确的名字");
		flag = 0;
	}
	if(!(/^1[34578]\d{9}$/.test(mobile))){
		document.getElementById("mobile").value = "";
		document.getElementById("mobile").setAttribute("placeholder","请输入正确的号码");
		flag = 0;
	}
	if(!(/^[1-9][0-9]{0,1}$/.test(people_num))){
		document.getElementById("people_num").value = "";
		document.getElementById("people_num").setAttribute("placeholder","请输入正确的就餐人数");
		flag = 0;
	}
	if(reserve_date==null || reserve_date==""){
		document.getElementById("reserve_date").value = "";
		flag = 0;
	}
	if(reserve_time==null || reserve_time==""){
		document.getElementById("reserve_time").value = "";
		flag = 0;
	}
	if(flag==1){
		document.getElementById("form1").submit();
	}
	
}

$(function(){
	var payflag = $("#payflag").val();
	if(payflag=="1"){
	    var reserveid =$("#reserve_id").val();
		//支付页面
		$.post("${ctx}/wxReserve/wxpay",{reserve_id:reserveid},function(data){
			function onBridgeReady(){
			    WeixinJSBridge.invoke(
			      'getBrandWCPayRequest',
			      data,
			      function(res){
			    	var id = $("#id").val();
			        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
			        if(res.err_msg == "get_brand_wcpay_request:ok" ) {
			        	window.location= '${ctx}/wxReserve/success?id='+id;
			        }
			      }
			    );
			  }
			if (typeof WeixinJSBridge == "undefined"){
			    if( document.addEventListener ){
			      document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
			    }else if (document.attachEvent){
			      document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
			      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
			    }
			  }else{
			    onBridgeReady();
			  }
		})
	}
})

</script>
</html>